<template>
  <div class="box-upl">
    <!-- :on-progress="handleFileUploadProgress" -->
    <el-upload
      class="upload-demo"
      ref="upload"
      action="void"
      :http-request="customUpload"
      :on-remove="removeFiles"
      :file-list="fileList"
      :before-upload="beforecheckfile"
      :on-change="handleChange"
      :auto-upload="true"
      accept=".rar, .zip, .doc, .docx, .pdf, .jpg, .png">
      <el-button
        slot="trigger" 
        size="small" 
        type="primary"
        class="uploadBtn"
        icon="el-icon-upload"
        :disabled="upload.isUploading"
      >
        上传文件
      </el-button>
      <div slot="tip" class="el-upload__tip">
        支持扩展名：.rar .zip .doc .docx .pdf .jpg .png,大小不超过30M
      </div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/util.js";
import { host } from "@/utils/config.js";
import { request } from "@/utils/request.js";

export default {
  props: {},
  watch: {},
  mounted(){},
  data() {
    return {
      fileList: [],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        // url: host + "/oss/upload",
        url: host + "/system/file/upload"
      },
      batchId: "",
      addformrules: {}
    };
  },
  methods: {
   customUpload(file){
      let FormDatas = new FormData();
      FormDatas.append('files', file.file);
      FormDatas.append('batchId', this.batchId)
      FormDatas.append('businessType', 'building')
      this.axios({
        url: this.upload.url,
        method: 'post',
        headers: this.upload.headers,
        data: FormDatas,
        //上传进度
        onUploadProgress: (progressEvent) => {
          // console.log('progressEvent', progressEvent)
          let num = progressEvent.loaded / progressEvent.total * 100 | 0;  //百分比
          file.onProgress({percent: num})     //进度条
        }
      }).then(res => {
        this.upload.open = false;
        this.upload.isUploading = false;
        console.log("res",res)
        if (res.data.code == 200) {
          this.getFileDataList(res.data.data)
        }
        file.onSuccess() //上传成功(打钩的小图标)
      })
    },
    //删除后
    removeFiles(response, fileList) {
      this.$emit("changeUp", "")
    },
    // 文件上传中处理
    // handleFileUploadProgress(event, file, fileList) {
    //   // this.name = file.name
    //   this.upload.open = true;
    //   this.upload.isUploading = true;
    // },
    //上传附件前限制大小 格式
    beforecheckfile(file) {
      this.upload.open = true;
      this.upload.isUploading = true;
      let isfile = true;
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      let fileformat = ["rar", "zip", "doc", "docx", "pdf",'jpg','png'];
      const isLt10M = file.size / 1024 / 1024 < 30;
      isfile = fileformat.includes(String(testmsg));
      if (!isfile) {
        this.$message.error("上传文件格式不正确");
      } else if (!isLt10M) {
        isfile = false;
        this.$message.error("上传文件大小不能超过 30M");
      }
      this.upload.open = false;
      this.upload.isUploading = false;
      return isfile;
    },
    //获取附件列表
    getFileDataList(url) {
      this.$emit("changeUp", url)
    },
    //获取附件列表
    // async getFileDataList(id) {
    //   let data = {
    //     batchId: id
    //   }
    //   let api = `${host}/system/file/list`
    //   let res = await request(this, api, data, "GET")
    //   if (res.code == 200) {
    //     this.addform.fileList = res.rows;
    //     this.$emit("changeUp", this.addform.fileList);
    //   } else {
    //     this.$message.error(res.msg);
    //   }
    // },
    //上传文件让第二次覆盖第一的文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length-1]]
      }
    }
  }
};
</script>

<style scoped>
.box-upl .uploadBtn {
  background-color: #f1f2f4;
  color: #045db9;
  border-width: 0;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 5px !important;
}
</style>
